<template>
	<div class="bg network-live">	
		<div>
			<h3>{{$t('home.liveLabel')}}</h3>
			<img class="img-live" :src="`/static/${theme}-img/sweep.png`" />
			<div class="text">
				{{$t('home.liveText1')}}
				<span class="num">{{net_state.host}}</span>
				{{$t('home.liveText2')}}
				<span  class="num">{{net_state.conns}}</span>
				{{$t('home.liveText3')}}<br/>
				{{$t('home.liveText4')}}
				<template v-if="time.d">
					<span>{{time.d}}</span>{{$t('home.days')}}  {{!time.h ? '。' : ''}}
				</template>
				<template v-if="time.h">
					<span>{{time.h}}</span>{{$t('home.hours')}} {{!time.m ? '。' : ''}}
				</template>
				<template v-if="time.m">
					<span>{{time.m}}</span>{{$t('home.minutes')}} {{!time.s ? '。' : ''}}
				</template>
				<template v-if="time.s">
					<span>{{time.s}}</span>{{$t('home.seconds')}}。
				</template>
			</div>
		</div>
		<div style="position: relative" class="safe-domain">
			<loading style="margin-top: 60px" v-show='!show'></loading>
			<h3 style="width:100%;border-top:1px solid #ededed;margin-top:5px;">{{$t('home.maskLabel')}}</h3>		
			<transition name="fade">
				<ul class="domain" v-show='show'>
					<li v-for='(item,index) in virtual' :key="index">
						<img v-if='item!=null' src="../../../img/greendot.png" />
						<img v-else src="../../../img/reddot.png" />
						<span class="name">{{$t('home.domain')}}&nbsp;{{index>=10?index:'0'+index}}:</span>
						<span class="num">{{item!=null ? item :0}}</span>
					</li>
				</ul>
			</transition>
		</div>
	</div>
</template>
<script>
// import safedomain from './rank/safedomain.vue'
import loading from 'components/common/loading'
export default {
	props:{
		net_state:{
			type:Object,
			required:true
		},
		show:{
			type:Boolean,
			required:true
		}
	},
	data() {
		return {
			theme:this.themeColor,
			num:0,
			time: {},
			virtual: {}
		}
	},
	components: {
		// safedomain,
		loading	
	},
	watch:{
		net_state:function(val) {
			this.time=this.formatTime(val.uptime)
			this.virtual=val.virtual?val.virtual:{}
		}	
	},
	methods: {
		formatTime(time) {
			if (time < 60) {
				return {s:time}
			}
			if (time >= 60 && time < 3600) {
				return {m:Math.floor(time/60),s:time % 60}
			}
			if (time >= 3600 && time < 24*3600) {
				return {h:Math.floor(time/3600),m:Math.floor(time%3600/60)}
			}
			if (time >= 24*3600) {
				return {d:Math.floor(time/24/3600),h:Math.floor(time%86400/3600)}
			}
		}
	}
}
</script>

